<template>
  <div class="app">
<!--   <test-page></test-page>-->
    <test-table></test-table>

    <!--    <cup></cup>-->
    <!--    <components-status background="red" value="666"></components-status>-->
    <!--    <editor v-model="state"></editor>-->
    <!--    <div class="select-c">-->
    <!--      77select-->
    <!--    </div>-->
  </div>
</template>
<script >

import oldTable from './TestTable.vue'

const Template_dom = `<old-table ref="table" :height="300" :checkBox="true" :headerData="colConfigsTable" :tableData="tableData">
<div slot="pushStudentStatus" slot-scope="{ row }" class="red-text">
<span v-if="row.pushStudentStatus == 0"class="info">
<i class="el-icon-remove"></i>模式状态</span><span class="info2"v-if="row.pushStudentStatus == 1">
<i class="el-icon-success"></i>模式状态</span><span class="info2"v-if="row.pushStudentStatus == 2">
<i class="el-icon-success"></i>模式状态</span><span class="info2"v-if="row.pushStudentStatus == 3">
<i class="el-icon-success"></i>模式状态</span>
</div><div slot="pushTeacher1Status" slot-scope="{ row }" class="red-text"><span v-if="row.pushTeacher1Status == 0" class="info">
<i class="el-icon-remove"></i>模式状态</span><span class="info2"v-if="row.pushTeacher1Status == 1"><i class="el-icon-success"></i>模式状态</span><span class="info2"v-if="row.pushTeacher1Status == 2"><i class="el-icon-success"></i>模式状态</span></div><div slot="useCard" slot-scope="{ row }"><span v-if="row.useCard==1">模式状态</span><span v-if="row.useCard==2">模式状态</span><span v-if="row.useCard==''">模式状态</span></div><div slot="isVip" slot-scope="{ row }"><span v-if="row.isVip==0">否</span><span v-if="row.isVip==1">是</span></div><div slot="isUpLoadVideo" slot-scope="{ row }"><span v-if="row.isUpLoadVideo==1">是</span><span v-if="row.isUpLoadVideo===0">否</span></div><div slot="teacherCode2" v-if="EnableTeacher2PushCard" slot-scope="{ row }"><span>{{row.TeacherName2}}</span></div><div slot="teacherName2" v-if="EnableTeacher2PushCard" slot-scope="{ row }"><span>{{row.TeacherName2}}</span></div><div slot="pushTeacher2Status" v-if="EnableTeacher2PushCard" slot-scope="{ row }" class="red-text"><span v-if="row.pushTeacher2Status == 0"class="info"><i class="el-icon-remove"></i>模式状态</span><span class="info2"v-if="row.pushTeacher2Status == 1"><i class="el-icon-success"></i>模式状态</span><span class="info2"v-if="row.pushTeacher2Status == 2"><i class="el-icon-success"></i>模式状态</span><!-- <span class="info2"v-if="row.pushTeacher2Status == 3"><i class="el-icon-success"></i>补录+打卡</span> --></div><div slot="isHBFlag"  slot-scope="{ row }"><span v-if="row.isHBFlag == 0">模式状态</span><span v-if="row.isHBFlag == 1">模式状态</span></div><div slot="isAudit" slot-scope="{ row }"><span v-if="row.isAudit == 0">模式状态</span><span v-if="row.isAudit == 1">模式状态</span></div><!--操作--><div slot="fixedRight" slot-scope="{ row }"><el-col :span="8"><button type="primary"size="mini"class="button-super__mini"v-if="row.isAudit == 0"@click="handleAudit('1', row)">模式状态</button><button type="primary"size="mini"class="button-super__mini"v-if="row.isAudit == 1"@click="handleAudit('0', row)">模式状态</button></el-col><el-col :span="8"><!--备注按钮--><el-popover placement="right"width="200"trigger="hover"v-if="row.memo"><span>{{ row.memo }}</span><button type="primary"class="class-schedule__btn-yellow button-super__mini"size="mini"@click="memoClick(row)"slot="reference">模式状态</button></el-popover><button type="primary"size="mini"class="button-super__mini"@click="memoClick(row)"v-else>模式状态</button></el-col><el-col :span="8"><!--清除--><button type="primary"size="mini"class="button-super__mini":class="{'class-schedule__btn-yellow': row.clearStatus === 1}"@click="clearClick(row)">模式状态</button></el-col></div></old-table>`
let item = {
  "lessonid": 172496219484,
  "sid": 53,
  "classCode": "模式状态",
  "className": "模式状态",
  "lessonNo": 3,
  "isVip": 0,
  "sectBegin": "2020-06-15T21:00:00",
  "sectEnd": "2020-06-15T23:00:00",
  "SectText": " 2020-06-15 21:00-23:00",
  "minutesSpan": "120",
  "hoursSpan": "2",
  "teacherCode1": null,
  "teacherName1": "",
  "teacherCode2": null,
  "teacherName2": "",
  "roomCode": "RMLY01059",
  "lessonTypeCode": 1,
  "lessonTypeName": "模式状态",
  "subjectCode": "",
  "subjectName": null,
  "courseCode": "CSLY01500024",
  "courseName": "模式状态",
  "operatorCode": null,
  "operatorName": null,
  "isVideolessonCode": 0,
  "isVideolessonName": "模式状态",
  "teachingContentTypeCode": 0,
  "teachingContentTypeName": "模式状态",
  "isUpLoadVideo": null,
  "memoStatus": 0,
  "memo": null,
  "memoHistory": null,
  "isAudit": 0,
  "auditTime": null,
  "auditTimeText": null,
  "auditUser": null,
  "auditName": null,
  "sMemo": null,
  "deptCode": "30",
  "deptName": "模式状态",
  "roomName": "模式状态",
  "areaCode": "模式状态",
  "areaName": "模式状态",
  "currentCount": 2,
  "useCard": 1,
  "pushStudentStatus": 0,
  "pushTeacher1Status": 0,
  "pushTeacher2Status": 0,
  "pushTeacher1UpLate": 0,
  "pushTeacher1UpTime": null,
  "pushTeacher2UpLate": 0,
  "pushTeacher2UpTime": null,
  "isHBFlag": 0,
  "mergeClass": null,
  "clearStatus": 0,
  "isLock": false,
  "gradeOuter": ""
}
// export const toStorybook = () => ({
//   components: {oldTable}, template: Template_dom, data() {
//     return {
//       colConfigsTable: [{prop: 'lessonNo', label: '姓名', width: 50}, {
//         prop: 'classCode',
//         label: '随机编号',
//         width: 120
//       }, {prop: 'className', label: '随机名称', width: 320}, {
//         prop: 'SectText',
//         label: '时间Time',
//         width: 150
//       }, {prop: 'hoursSpan', label: '小时数北京', width: 50}, {
//         prop: 'courseName',
//         label: '课程名称',
//         width: 150
//       }, {prop: 'gradeOuter', label: '年级（中国）'}, {
//         prop: 'roomName',
//         label: '教室',
//         width: 160
//       }, {prop: 'teacherCode1', label: '教师编号', width: 140}, {
//         prop: 'teacherName1',
//         label: '教师'
//       }, {prop: 'isVideolessonName', label: '授课方式标识', width: 90}, {
//         prop: 'teachingContentTypeName',
//         label: '内容类型',
//         width: 90
//       }, {prop: 'pushStudentStatus', label: '学员状态', slot: 'pushStudentStatus'}, {
//         prop: 'pushTeacher1Status',
//         label: '教师状态',
//         slot: 'pushTeacher1Status',
//         width: 100
//       }, {prop: 'useCard', label: '使用皮卡丘', slot: 'useCard'}, {
//         prop: 'operatorName',
//         label: '排课操作人'
//       }, {prop: 'lessonTypeName', label: '课节类型'}, {
//         prop: 'areaName',
//         label: '教学区',
//         width: 150
//       }, {prop: 'deptName', label: '标准部门', width: 90}, {
//         prop: 'isVip',
//         label: '是否VIP',
//         slot: 'isVip'
//       }, {prop: 'minutesSpan', label: '分钟数'}, {prop: 'subjectName', label: '科目'}, {
//         prop: 'isUpLoadVideo',
//         label: '视频是否上传',
//         width: 120,
//         slot: 'isUpLoadVideo'
//       }, {prop: 'currentCount', label: '当前人数（占名额）', width: 120}, {
//         prop: 'teacherCode2',
//         label: '模式状态',
//         width: 140,
//         slot: 'teacherCode2'
//       }, {prop: 'teacherName2', label: '模式状态', slot: 'teacherName2'}, {
//         prop: 'pushTeacher2Status',
//         label: '模式状态',
//         slot: 'pushTeacher2Status',
//         width: 100
//       }, {prop: 'isHBFlag', label: '模式状态', slot: 'isHBFlag'}, {
//         prop: 'mergeClass',
//         label: '模式状态',
//         width: 100
//       }, {prop: 'isAudit', label: '状态', slot: 'isAudit'}, {
//         prop: 'auditUser',
//         label: '审核人ca',
//         width: 150
//       }, {prop: 'auditTimeText', label: '审核时间Time', width: 150}, {
//         prop: 'Operator',
//         label: '操作',
//         slot: 'Operator',
//         width: 200
//       }], tableData: Array(40).fill(item)
//     };
//   }, methods: {}
// });
// toStorybook.story = {name: 'table',};
import {ref} from "vue";



</script>


<style scoped lang="scss">
//@import url('./input.css');

body {
  display: flex;
}

.con {
  height: 100%;
  width: 100%;
  //position: fixed;
  //top: 20px;
  //left: 20px;
  //right: 20px;
  //bottom: 20px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.select-c::selection {
  background: red;
}

.par {
  height: 200px;
  width: 100px;
  border: aquamarine 1px solid;
  display: grid;

}

.child {
  justify-self: center;
  align-self: center;
}

#router {
  text-decoration: chartreuse 1px;
}
</style>
